<script setup>
import buttonVue from '../button/button.vue';
import { ref, onMounted, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import qs from 'qs'
import { ElMessageBox } from 'element-plus'
import axios from 'axios';
const router = useRouter();
const input = ref('')

const header = ref('支付限额')

var moneyPatten = /^[1-9]\d{0,8}$/

const isMoneyTrue = ref(true)

function determine() {
    isMoneyTrue.value = moneyPatten.test(limitMoney.value)
}

const userNumber = ref('U10000000001') //用户账号
const userId = ref('1')  //用户id

const limitMoney = ref('') //输入的充值金额

// const value1 = ref('') //下拉框的银行卡账号

// //从后端数据库中请求的类型数据对应的卡类型
// let cards1 = ref()//储蓄卡的数组
// //初始化的时候就渲染好类别和卡号
// onMounted(() => {
//     axios.get("http://localhost:8080/user/queryNoBindAccountController", {
//         params: {
//             userNumber: userNumber.value
//         }
//     }).then((resp) => {
//         if(resp.data.code == 200){
//             cards1.value = resp.data.datas
//             // console.log(resp.data.datas[0].accountNumber);
//             // console.log(cards1.value[0].accountNumber);
//         }else if(resp.data.datas == 500){
//             open("服务器内部错误")
//         }
//     }).catch((e) => {
//         // catch中获取到的值是请求失败或者代码问题造成的错误，而因代码造成的错误在.then()中获取不到，因此我们常用catch
//         // 我们偶尔会遇到一些问题：明明请求成功了，逻辑却进入catch中了，这时说明在then中的处理逻辑可能出现了错误，并不是请求失败才会进入catch
//         //跳转到404页面
//         router.push('/')
//     })
// })
function open(errormsg) {
    ElMessageBox.alert(errormsg, '验证失败!', {
        confirmButtonText: '确认',
    })
}
function limit() {
    if (limitMoney.value == "") {
        open("请设置支付限额")
    } else {
        if (isMoneyTrue.value) {

            sessionStorage.setItem('userNumber', userNumber.value),//用户账号
                sessionStorage.setItem('payLimit', limitMoney.value),//输入金额
                sessionStorage.setItem('header', header.value)//当下的表头
            //JSON.stringify 是将字符串包装成json对象
            sessionStorage.setItem('userId', JSON.stringify(userId.value)) //用户id
            //弹出一个输入密码组件
            router.push('/payment-password')
        } else {
            money.value == ""
        }
    }
}
</script>

<template>
    <div class="container">
        <div class="box">
            <h1 class="title">重新设置支付限额</h1>
            <input type="text" placeholder="设置支付限额" v-model="limitMoney" @blur="determine()" maxlength="9">
            <p class="p1" v-if="!isMoneyTrue">支付限额框只能输入数字且不为空</p>
            <button-vue btn-color="#1058f3" btn-name="立即修改支付限额" @click="limit()"></button-vue>
        </div>
    </div>
</template>

<style scoped>
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

.container {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.box {
    margin: 0px auto 0;
    text-align: center;
    width: 100%;
    background-color: #fff;
    padding: 10px 0;
}

.p1 {
    width: 260px;
    margin: 0 auto;
    color: red;
    font-size: 14px;
    text-align: left;
    text-indent: 10px;
    margin-top: 10px;
}

.title {
    font-size: 16px;
    margin: 10px 0;
}

input {
    width: 80%;
    font-size: 18px;
    outline: none;
    padding: 10px 0;
    border: transparent;
    border-bottom: 1px solid lightgray;
    margin: 20px 0;
}</style>